<template>
  <div class="recommend">
    <div class="xialaRecommed">
      <ul class="xialaRecommed_head">
        <li class="xialaRecommed_content">
          <a class="option_menu">
            <span class="option_head_name">小吃快餐</span>
            <span class="xiala">
              <img src="../../../../assets/xiala.png">
            </span>
          </a>
        </li>
        <li class="xialaRecommed_content">
          <a class="option_menu">
            <span class="option_head_name">附近商家</span>
            <span class="xiala">
              <img src="../../../../assets/xiala.png">
            </span>
          </a>
        </li>
        <li class="xialaRecommed_content">
          <a class="option_menu">
            <span class="option_head_name">智能排序</span>
            <span class="xiala">
              <img src="../../../../assets/xiala.png">
            </span>
          </a>
        </li>
        <li class="xialaRecommed_content">
          <a class="option_menu">
            <span class="option_head_name">筛选</span>
            <span class="xiala">
              <img src="../../../../assets/xiala.png">
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="recommend_list">
      <div class="list_item" v-for="item in list" :key="item.id">
        <div class="list_item_up">
          <div class="item_img">
            <img :src="item.img_url" alt>
          </div>
          <div class="item_content">
            <div class="item_info">
              <div class="item_name">{{item.name}}</div>
              <div class="item_price">
                <span class="starts">
                  <img
                    v-for="staritem in item.star_img"
                    :key="staritem.id"
                    class="iconfont"
                    :src="staritem.star_img_url"
                    alt
                  >
                </span>
                <span class="price">￥{{item.price}}/人</span>
                <div class="location">
                  <span class="area">{{item.place}}</span>
                  {{item.distance}}
                </div>
              </div>
              <div class="item_cate">
                <span class="catename">{{item.catename}}</span>
                <span class="smart-tag index-0">{{item.tag_1}}</span>
                <span class="smart-tag index-1">{{item.tag_2}}</span>
              </div>
              <div class="item_service">
                <span class="service index-0">{{item.service}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="list_item_down">
          <div class="list_maidan">
            <div class="maidan_continer">
              <div class="maidan_wrapper"></div>
              <div class="maidan_box">
                <img :src="item.maidan_img" alt>
                <span class="maidan_content">{{item.maidan_content_1}}</span>
              </div>
            </div>
            <div class="maidan_continer">
              <div class="maidan_wrapper"></div>
              <div class="maidan_box">
                <img :src="item.youhui_img" alt>
                <span class="maidan_content">{{item.maidan_content_2}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FoodHeader",
  props: {
    list: Array
  },
  data: function() {
    return {};
  }
};
</script>

<style scoped>
.list_item {
  border-top: 0.02rem solid #ddd8ce;
  width: 100%;
  overflow: hidden;
}
.list_item_up {
  padding: 0.2rem 0rem 0rem 0.2rem;
}
.item_img {
  width: 1.7rem;
  height: 1.7rem;
  position: absolute;
}
.item_img img {
  width: 100%;
  height: 100%;
}
.item_content {
  text-align: left;
  margin-left: 1.88rem;
  height: 1.7rem;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 0.18rem 0.16rem 0;
}
.item_info {
  height: 100%;
  width: 100%;
}
.item_name {
  font-size: 0.3rem;
  height: 0.48rem;
  line-height: 0.48rem;
  color: #333333;
  letter-spacing: 0.28px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item_price {
  font-size: 0.24rem;
  line-height: 0.33rem;
  position: relative;
  margin-top: 0.06rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.starts {
  display: inline-block;
  color: #fa952f;
}
.iconfont {
  font-size: 0.45rem;
  width: 0.24rem;
  height: 0.24rem;
  margin-right: 0.04rem;
}
.price {
  display: inline-block;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  color: #583b3b;
  letter-spacing: 0.2px;
}
.location {
  position: absolute;
  top: 0;
  right: 0;
  height: 0.33rem;
  line-height: 0.33rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular;
  color: #666666;
  letter-spacing: 0.2px;
}
.location .area {
  margin-right: 0.08rem;
}
.item_cate {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 0.08rem;
  height: 0.33rem;
  line-height: 0.33rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catename {
  display: inline-block;
  height: 0.28rem;
  line-height: 0.28rem;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  color: #666666;
  letter-spacing: 0.2px;
  margin-right: 0.09rem;
  vertical-align: middle;
}
.smart-tag {
  color: rgb(190, 158, 77);
  background-color: rgb(251, 244, 228);
  display: inline-block;
  margin-right: 0.1rem;
  height: 0.28rem;
  line-height: 0.28rem;
  vertical-align: middle;
  padding: 0 0.04rem;
  font-size: 0.22rem;
  border-radius: 0.05rem;
}
.item_service {
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  margin-top: 0.1rem;
  height: 0.33rem;
  line-height: 0.33rem;
  color: #6cbab2;
  letter-spacing: 0.2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_maidan {
  padding: 0.05rem 0 0.15rem 0;
}
.maidan_continer {
  margin: 0.1rem 0;
  height: 0.4rem;
}
.maidan_wrapper {
  position: absolute;
  width: 1.88rem;
  height: 0.4rem;
}
.maidan_box {
  margin-left: 2.06rem;
  float: left;
}
.maidan_continer img {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.1rem;
  display: inline-block;
  vertical-align: middle;
}
.maidan_content {
  font-family: PingFangSC-Regular;
  font-size: 0.22rem;
  color: #666666;
  letter-spacing: 0.18px;
  max-width: 3.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
ul li {
  list-style: none;
}
.xiala img {
  max-width: 0.3rem;
}
.option_menu {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.xialaRecommed {
  width: 100%;
  height: 0.8rem;
  font-size: 0.28rem;
}
.xialaRecommed_head {
  height: 100%;
}
.xialaRecommed_content {
  width: 25%;
  height: 0.8rem;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
</style>